<template>
  <div>
    <ul>
      <!-- 数组 -->
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} {{ index }}
        <input type="text" />
      </li>
    </ul>
    <button @click="reverse">新添加</button>
  </div>
</template>

<script>
// 目标：有key——值为缩影
// 效果：和无key是一样的
// 无key，用标签名对比新旧的虚拟DOM差异
// 有key.用key值对比新旧的虚拟DOM差异
// 新旧虚拟DOM创建完成以后偶，才去对比差异，找到差异就局部更新真实DOM
// 问题：新虚拟DOM结构key还是索引连续，就地复用前面几个key一致的标签





export default {

  data () {
    return {
      arr: ['姐姐', '妹妹', '弟弟', '哥哥'],


    }
  },
  methods: {
    reverse () {
      this.arr.splice(1, 0, '新来的')

    },


  }
}
</script>

<style>
</style>
